<template>
    <div>
        <el-row>
            <el-col :span="24" :inline="true" class="operateView">
                <el-form :inline="true" style="margin:10px 0;margin-left: 20px;">
                    <el-button @click="operateAction('back')" type="info" plain size="small">返回</el-button>
                </el-form>
            </el-col>
        </el-row>
        <div class="app-container">
            <el-row style="margin-top: 10px">
                <el-form ref="rowForm" label-position="left">
                    <el-row style="display: flex;flex-direction: row;flex-wrap: wrap;">
                        <el-col style="margin-left: 20px" :span="item.width ? item.width : 5"
                            v-for="(item, index) in formData.detailFieldList" :key="index" v-if="passRole(item.roles)">
                            <el-form-item :label="item.showName + ':'" :prop="item.key"
                                v-if="item.formType == 'Switch'">
                                    {{ rowForm[item.key] ? '是' : '否' }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'Textarea'">
                                {{ rowForm[item.key] }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'RichText'">
                                <Editor v-model="rowForm[item.key]" :minHeight="600" />
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'DatePicker'">
                                {{ formatTime.dateFormat('YY-MM-DD hh:mm:ss', rowForm[item.key]) }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'Record'">
                                {{ rowForm[item.relatedModel]?rowForm[item.relatedModel][item.relatedKey]:'' }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'Option'">
                                {{formData.dicts[item.key][rowForm[item.key]] }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'Upload'">
                                <el-image :style="{'width': item.imgW+'px', 'height': item.imgH+'px'}" fit="contain" :src="rowForm[item.key]"></el-image>
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else>
                                {{ rowForm[item.key] }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            currentRouteName: '',
            rowId: '',
            rowForm: {},
            formData: {}
        }
    },
    created() {
        if (this.$route.query.currentRouteName) {
            this.currentRouteName = this.$route.query.currentRouteName
        }
        if (this.$route.query.formData) {
            this.formData = JSON.parse(decodeURIComponent(this.$route.query.formData))
        }
        if (this.$route.query.rowId) {
            this.rowId = this.$route.query.rowId
            this.getItemById()
        }
    },
    methods: {
        operateAction(scene) {
            var data = {}
            switch (scene) {
                case 'back':
                    this.$router.push({name: this.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams}})
                    break;
                default:
                    break;
            }
        },
        // 获取item详情
        getItemById() {
            this.request_post(this.formData.getItemUrl, {obj_id: this.rowId}).then(res => {
                if (res.data.code == 10000) {
                    this.rowForm = res.data.data
                }
            });
        },

    }
}
</script>

<style lang="scss" scoped>
.operateView {
    width: 100%;
    background-color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>
